<template>
  <div class="lix-pdf__item">
    <div class="header" v-if="type === 'orderlist'">
      <div>订单编号：20180808-123456</div>
      <div class="status">未支付（待付款）</div>
    </div>
    <div class="header detail" v-if="type === 'detail'">
      <div>订单信息：</div>
      <div class="orderid">订单号：20180808-123456</div>
    </div>
    <div class="header detail" v-if="type === 'return'">
      <div>退货申请：</div>
      <div class="orderid">申请已提交</div>
    </div>
    <div class="content">
      <div class="item" v-for="n in 3" :key="n">
        <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://ss3.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=55312ba174310a55db24d8f487454387/09fa513d269759ee9f6ad199bffb43166d22dfae.jpg"
        />
      </div>
    </div>
    <div class="footer">
      <div>共计15件商品</div>
      <div class="price">￥27372<span v-if="type === 'orderlist'">（含运费￥10）</span></div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Card } from 'vant'
Vue.use(Card)
export default {
  props: {
    type: '',
    productlist: []
  },
  created () {
    console.log(this.type)
  }
}
</script>

<style lang="scss">
@import "../theme-chalk/product-info.scss";
.van-card__title {
  font-size: 15px;
  color: #544e58;
  font-weight: 600;
}
.van-card__desc {
  font-size: 13px;
  color: #98959b;
  font-weight: 500;
  margin-top: 10px;
}
.van-card__right {
  font-size: 14px;
  color: #544e58;
  font-weight: 500;
}
.van-card__num {
  color: #98959b;
}
.van-card {
  background: #fff;
  padding-top: 10px;
}
</style>
